<template>
	<view class="wrap">
		<view class="item"  v-for="(item,index) in list" :key="index"  @click="nav(item)"  
		:style="{backgroundImage:`url(${img[index].bg})`}" 
		 >
			<view class="top s-flex-r-b-s">
				<view class="l s-flex-r-s-s">
					<!-- <image class="img" :src="`/static/images/memberCard/${index+1}.png`" mode=""></image> -->
		<!-- 			<view class="name">
						{{item.name}}
					</view> -->
				</view>
				<view class="btn s-flex-c-c-c" v-if="vipInfo&&vipInfo.level>=item.level">
					<template v-if="item.level==1">
						<text v-if="item.is_receive==1||item.is_virtual_receive==1">已领取</text>
						<text v-else>去领取</text>
					</template>
					<template v-if="item.level>1">
						<text v-if="item.is_receive===1&&item.is_virtual_receive===1">已领取</text>
						<text v-else-if="item.is_receive==2||item.is_virtual_receive==2">已开通</text>
						<text v-else>去领取</text>
					</template>
				</view>
				<view class="btn s-flex-c-c-c" v-else>
					<text>去开通</text>
				</view>
				
			</view>
			<!-- <view class="line"></view>
			<view class="btm s-flex-r-b-s">
				<view class="more">
					探索会员福利 >
				</view>
				<view class="more">
					解锁更多会员特权 >
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				img:[
					{
						bg:'https://guanchong.bigchun.com/uploads/20240815/f0f8324d0f3e28a7006140474e58d7a8.png',
						vip:'https://guanchong.bigchun.com/uploads/20240815/afb29f97b3925c0c07da3bae4df42c73.png',
					},
					{
						bg:'https://guanchong.bigchun.com/uploads/20240815/8cfa4c70c28b47cffcf5a215a4db948e.png',
						vip:'https://guanchong.bigchun.com/uploads/20240815/ad265698d8c535a17316a8e940896aef.png',
					},
					{
						bg:'https://guanchong.bigchun.com/uploads/20240815/503eb83ffb9ccbf71c34f18ea5b8a217.png',
						vip:'https://guanchong.bigchun.com/uploads/20240815/c3de4622ece78c9bc1ccd449786d2e1d.png',
					},
				],
				show: false,
				vipInfo:{},
				list:[]
			};
		},
		onShow() {
			this.getList()
		},
		methods: {
			nav(item){
				if(item.level==1){
					if(item.is_receive===1||item.is_virtual_receive===1){
						return uni.showToast({
							title:"您已开通且领取过",
							icon:"none"
						})
					}
				}
				if(item.level>1){
					if(item.is_receive==2||item.is_virtual_receive==2){
						return uni.showToast({
							title:"您已开通!",
							icon:"none"
						})
					}
					if(item.is_receive===1&&item.is_virtual_receive===1){
						return uni.showToast({
							title:"您已开通且领取过",
							icon:"none"
						})
					}
				}
				this.go(`/pages/index/memberCard/memberCardDetails?level=${item.level}&is_receive=${item.is_receive}&is_virtual_receive=${item.is_virtual_receive}&vipLevel=${this.vipInfo.level||''}`)
			},
			getList(){
				this.$http('vip.index', {}).then(res => {
					this.list = res.data.vipList
					console.log('this.list: ', this.list)
					this.vipInfo = res.data.vipInfo||{}
				});
			},
		},
	}
</script>

<style lang="scss">
.wrap{
	padding: 18rpx 32rpx;
	.item{
		width: 686rpx;
		height: 250rpx;
		background-position: 0 0;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: relative;
		margin-bottom: 20rpx;
		&:nth-child(2) {
			background-size: 100% 100%;
			.top{
				.btn{
					background: #6464C8;
					}
			}
		}
		&:nth-child(3){
			background-size: 100% 100%;
			.top{
				.btn{
					background: linear-gradient( 180deg, #83888B 0%, #43474A 100%);
					}
			}
		}
		.top{
			.l{
				.img{
					margin-left: 40rpx;
					width: 98rpx;
					height: 130rpx;
				}
				.name{
					margin-top: 54rpx;
					font-weight: 500;
					font-size: 40rpx;
					color: #03102E;
					line-height: 47rpx;
					margin-left: 26rpx;
				}
				
			}
			.btn{
				margin-top: 52rpx;
				width: 136rpx;
				height: 60rpx;
				background: #7CA4FA;
				border-radius: 29rpx 29rpx 29rpx 29rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 33rpx;
				margin-right: 40rpx;
			}
		}
		.line{
			margin-bottom: 36rpx;
			margin-top: 22rpx;
			margin-left: 26rpx;
			width: 628rpx;
			height: 2rpx;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			background: #FFFFFF;
		}
		.btm{
			padding-left: 26rpx;
			padding-right: 32rpx;
			.more{
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				line-height: 28rpx;
			}
		}
		
	}
}
.s-flex-wrap{
	  flex-wrap: wrap;
  }
  .s-flex-r-s-s {
    display: flex;
  }
  .s-flex-r-s-c {
    display: flex;
    align-items: center;
  }
  .s-flex-r-e-c {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .s-flex-r-c-c {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .s-flex-r-b-c {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .s-flex-r-b-s {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  .s-flex-r-b-e {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }

  .s-flex-c-s-s {
    display: flex;
    flex-direction: column;
  }

  .s-flex-c-s-c {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }

  .s-flex-c-b-s {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
  }

  .s-flex-c-c-c {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .s-flex-c-s-e {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
  }
  .s-flex-c-e-c {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
  }
  .flex1{
	  flex: 1;
  }

</style>
